<template>
    <div class="notice-wrap">
        <div class="notice-top-wrap">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">综合服务平台</el-breadcrumb-item>
                <el-breadcrumb-item v-if="secondT">{{secondT}}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="thirdT">{{thirdT}}</el-breadcrumb-item>
            </el-breadcrumb>
            <i class="el-icon-close" @click="closeNotice"></i>
        </div>
        <div class="notice-cont-wrap">
            <div class="notice-cont-tit">
                <h3>{{current.title}}</h3>
                <p style="line-height: 26px;">{{current.categoryName}}</p>
                <p>{{noticeData.releaseTime}}</p>
            </div>
            <div class="notice-cont-cont noScrollBar" >
                <div class="noticeHtml" v-html="current.content"></div>
                <div class="inscribe-wrap">
                    <el-button class="inscribe-btn" type="primary" size="small" icon="el-icon-download">下载</el-button>
                    <div>
                        <p class="text-right">{{current.categoryName}}</p>
                        <p class="text-right">{{current.releaseTime}}</p>
                    </div>
                </div>

            </div>
            <div class="nitice-btn-wrap">
                <el-button size="small" @click="pre" :disabled="index==0">上一篇</el-button>
                <el-button size="small" @click="next" :disabled="index==list.length-1">下一篇</el-button>
            </div>
        </div>
    </div>
</template>
<script>
//   import {mapGetters, mapState} from "vuex";

  export default {
    name: "notice",
    props: {
      noticeData:[Object],
      secondT:[String],
      thirdT:[String],
        cloNotice: {
            type: Function,
            default: null
        }
    },
    data() {
      return {
        current:this.noticeData.current,
        list:this.noticeData.list,
        index:this.noticeData.index
      };
    },
    watch:{
      noticeData:{
        handler(val, oldVal){
          this.current = this.noticeData.current;
          this.list = this.noticeData.list;
          this.index = this.noticeData.index;
        },deep:true,immediate:true
      }
    },
    created() {
    },
    mounted() {

    },
    computed: {
    //   ...mapGetters(["tagWel", "tagList", "tag", "website", "tabList", "screen", "menu"]),
    //   ...mapState({
    //     showTag: state => state.common.showTag
    //   })
    },
    methods: {
        closeNotice() {
            this.cloNotice()
        },
      next(){
        if(this.index<this.list.length-1) {
          this.index++;
          this.current = this.list[this.index]
        }
      },
      pre(){
          if(this.index>0) {
            this.index --;
            this.current = this.list[this.index]
          }
      }
    }
  };
</script>
<style lang="scss">
.notice-wrap {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    .notice-top-wrap {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }
    .notice-cont-wrap {
        padding: 0px 10px 20px 10px;
        .notice-cont-tit {
            text-align: center;
            >p {
                color: #34404B;
                line-height: 0px;
                font-size: 13px;
            }
        }
        .notice-cont-cont {
            padding: 10px 0;
            // border-top: 1px dashed #34404B;
            // border-bottom: 1px dashed #34404B;
            height: calc(100vh - 410px);
            overflow: hidden auto;
          .noticeHtml{
            p{
              text-indent: 2em;
            }
          }
            >p {
                font-size: 15px;
                color: #11212F;
                line-height: 20px;
                text-indent: 30px;
            }
            .inscribe-wrap {
                @extend %flex-between;
                .inscribe-btn {
                    margin: auto 0;
                }
                .text-right {
                    text-align: $textRight;
                    line-height: 10px;
                }
            }

        }
        .nitice-btn-wrap {
            padding-top: 10px;
            text-align: center;
        }
    }

}
</style>
